<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>echarts中国地图</title>
    <style>
        .centerItem {
            width: 856px;
            height: 640px;
            background-color: #1A1A1A;
            margin: 110px auto 0 auto;
        }
    </style>
</head>
 
<body>
    <!-- 中国地图展示 -->
    <div id="mapBox" class="centerItem"></div>
 
    <!-- 引入相关文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>

 
    <script>
        // 基于准备好的dom，初始化echarts实例
        var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
 
        // 指定相关的配置项和数据
        var mapBoxOption = {
            title: {
                text: '点亮城市',
                subtext: 'highlight city',
                sublink: 'http://www.pm25.in',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            series: [{
                type: 'map',
                mapType: 'china',
                label: {
                    normal: {
                        // show: true, //显示省份标签
                        textStyle: {
                            color: "blue"
                        } //省份标签字体颜色
                    },
                    emphasis: { //对应的鼠标悬浮效果
                        show: false,
                        textStyle: {
                            color: "#800080"
                        }
                    }
                },
                aspectScale: 0.75,
                zoom: 1.2,
                itemStyle: {
                    normal: {
                        borderWidth: .5, //区域边框宽度
                        borderColor: '#009fe8', //区域边框颜色
                        areaColor: "#ffefd5", //区域颜色
                    },
                    emphasis: {
                        borderWidth: .5,
                        borderColor: '#4b0082',
                        areaColor: "#ffdead",
                    }
                },
                data: [
                    { name: '北京', selected: false, value: 1 },
                    { name: '天津', selected: false, value: 2 },
                    { name: '上海', selected: false, value: 3 },
                    { name: '重庆', selected: false, value: 4 },
                    { name: '河北', selected: false, value: 5 },
                    { name: '河南', selected: false, value: 6 },
                    { name: '云南', selected: false, value: 7 },
                    { name: '辽宁', selected: false, value: 8 },
                    { name: '黑龙江', selected: false, value: 9 },
                    { name: '湖南', selected: false, value: 10 },
                    { name: '安徽', selected: false, value: 11 },
                    { name: '山东', selected: false, value: 12 },
                    { name: '新疆', selected: false, value: 13 },
                    { name: '江苏', selected: false, value: 14 },
                    { name: '浙江', selected: false, value: 15 },
                    { name: '江西', selected: false, value: 16 },
                    { name: '湖北', selected: false, value: 17 },
                    { name: '广西', selected: false, value: 18 },
                    { name: '甘肃', selected: false, value: 19 },
                    { name: '山西', selected: false, value: 20 },
                    { name: '内蒙古', selected: false, value: 21 },
                    { name: '陕西', selected: false, value: 22 },
                    { name: '吉林', selected: false, value: 23 },
                    { name: '福建', selected: false, value: 24 },
                    { name: '贵州', selected: false, value: 25 },
                    { name: '广东', selected: false, value: 26 },
                    { name: '青海', selected: false, value: 27 },
                    { name: '西藏', selected: false, value: 28 },
                    { name: '四川', selected: false, value: 29 },
                    { name: '宁夏', selected: false, value: 30 },
                    { name: '海南', selected: false, value: 31 },
                    { name: '台湾', selected: false, value: 32 },
                    { name: '香港', selected: false, value: 33 },
                    { name: '澳门', selected: false, value: 34 }
                ] //各省地图颜色数据依赖value
            }],
            dataRange: {
                // x: '-1000 px', //图例横轴位置
                // y: '-1000 px', //图例纵轴位置
                splitList: [
                    { start: 1, end: 1, label: '北京', color: '#4A90E2' },
                    { start: 2, end: 2, label: '天津', color: '#4A90E2' },
                    { start: 10, end: 10, label: '湖南', color: '#4A90E2' },
                    { start: 15, end: 15, label: '浙江', color: '#4A90E2' },
                    { start: 16, end: 16, label: '江西', color: '#4A90E2' },
                    { start: 17, end: 17, label: '湖北', color: '#4A90E2' },
                    { start: 24, end: 24, label: '福建', color: '#4A90E2' },
                    { start: 26, end: 26, label: '广东', color: '#4A90E2' },
                ]
            }, //各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；
        };
        // 使用制定的配置项和数据显示图表
        mapBoxEchart.setOption(mapBoxOption);
        // echart图表自适应
        window.addEventListener("resize", function() {
            mapBoxEchart.resize();
        });
    </script>
 
</body>
 
</html>